<template>
  <!-- 新闻 -->
  <div :class="['News', { mobile: $isMobile }]">
    <div
      class="top"
      v-if="$isMobile"
    >
      {{ t('header.menu2') }}
    </div>

    <div class="g-con">
      <Banner bannerModel="4" />
      <!-- <div
        v-if="!$isMobile"
        :class="['select', 'flexsc', 'mt-3']"
      >
        <div class="mr-1">
          {{ t('news.classification') }}
        </div>
        <img
          src="@/assets/img/icon_xiala.png"
          alt=""
        />
      </div> -->

      <div
        class="tab mt-3"
        v-if="!$isMobile"
      >
        <el-tabs
          v-model="activeName"
          @tab-click="tabChange"
        >
          <el-tab-pane
            :label="label"
            :name="value"
            v-for="{ value, label } in tabsType"
            :key="value"
          ></el-tab-pane>
        </el-tabs>
        <!-- <el-tabs
          v-model="activeName2"
          @tab-change="tabChange2"
        >
          <el-tab-pane
            :label="label"
            :name="value"
            v-for="{ value, label } in tabs"
            :key="value"
          ></el-tab-pane>
        </el-tabs> -->
      </div>

      <template v-if="$isMobile">
        <div class="tabm clearfix noscrollbar">
          <div
            :class="['item', 'flexcc', { active: searchData.newsModel === value }]"
            v-for="{ value, label } in tabsType"
            :key="value"
            @click="tabClick(value)"
          >
            {{ label }}
          </div>
          <!-- <div
            :class="['item', 'flexcc', { active: searchData.isLastThreeDay === value }]"
            v-for="{ value, label } in tabs"
            :key="value"
            @click="tabChange2(value)"
          >
            {{ label }}
          </div> -->
        </div>
      </template>

      <div class="list mt-2">
        <div
          class="item"
          v-for="{ id, newsImage, newTitle, createTime, newContent, readingNum } in listData"
          :key="id"
          @click="openDetail(id)"
        >
          <img
            class="pic"
            :src="newsImage"
            alt=""
          />
          <div
            class="title line-2"
            :title="newTitle"
          >
            {{ newTitle }}
          </div>
          <div class="time">{{ dateFormat(createTime, 3) }}</div>
          <div class="text noscrollbar line-4">{{ toText(newContent, 120) }}</div>
          <!-- <div class="icon flexsc">
            <div class="flexsc mr-2">
              <img
                src="@/assets/img/icon_yuedu.png"
                alt=""
              />
              <div>{{ readingNum }}</div>
            </div> -->
            <!-- <div class="flexsc">
              <img
                src="@/assets/img/icon_fenxiang.png"
                alt=""
              />
              <div>50</div>
            </div> -->
          <!-- </div> -->
        </div>
      </div>

      <div class="flexcc mt-7">
        <el-pagination
          layout="prev, pager, next"
          :hide-on-single-page="total <= page.pageSize"
          :total="total"
          v-model:current-page="page.pageNum"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === '/detail') {
        vm.setKeep()
      }
    })
  }
})
</script>
<script setup>
import { nextTick, onBeforeMount, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getNewsListApi } from '@/service/news'
import { dateFormat, toText, openUrl } from '@/utils'
import useNews from '@/stores/news'
import useDict from '@/hooks/useDict'
import Banner from '@/components/Banner.vue'

const { dictData, getDictData } = useDict()
const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const route = useRoute()

const { t, locale } = useI18n()
const store = useNews()
const { setState } = store

const setKeep = () => {
  if(!Object.keys(store.state).length) return
  activeName.value = store.state.activeName
  page.value = store.state.page
  searchData.value = store.state.searchData
}

watch(
  () => store.key,
  (n) => {
    searchData.value = { ...store.searchData }
    activeName.value = store.searchData.newsModel || ''
    getList()
  },
  {
    deep: true
  }
)

watch(locale, (n) => {
  init()
})
onBeforeMount(() => {
  searchData.value = { ...store.searchData }
  activeName.value = store.searchData.newsModel || ''
  init()
})

// tab
const activeName = ref('')
const activeName2 = ref('')
const tabsType = ref([])
const tabs = ref([])
const setTabData = () => {
  tabsType.value = [
    {
      label: t('news.homepage'),
      value: ''
    },
    ...dictData.value['model_name'].map((item) => {
      return {
        label: item.dictLabel,
        value: item.dictValue
      }
    })
  ]
  tabs.value = [
    {
      label: t('news.t0'),
      value: 0,
      type: 'time'
    },
    {
      label: t('news.t1'),
      value: 1,
      type: 'time'
    },
    {
      label: t('news.t2'),
      value: 2,
      type: 'time'
    },
    {
      label: t('news.t3'),
      value: 3,
      type: 'time'
    }
  ]
}
// 类型
const tabChange = (pane, e) => {
  const {
    props: { name }
  } = pane
  searchData.value.newsModel = name
  page.value.pageNum = 1
  getList()
}
const tabClick = (name) => {
  searchData.value.newsModel = name
  page.value.pageNum = 1
  getList()
}
// 时间
const tabChange2 = (name) => {
  searchData.value.isLastThreeDay = name
  page.value.pageNum = 1
  getList()
}

// 搜索
const searchData = ref({})

// 列表
const listData = ref([])
const page = ref({
  pageNum: 1, // 当前页码
  pageSize: 9 // 每页条数
})
const total = ref(0) // 总数
const getList = () => {
  const params = { ...page.value, ...searchData.value }
  getNewsListApi(params).then(({ rows, total: t }) => {
    listData.value = rows
    total.value = t
  })
}
// 分页
const handleCurrentChange = (val) => {
  getList()
}

// 详情
const openDetail = (id) => {
  setState({ activeName: activeName.value, page: page.value, searchData: searchData.value })
  const name = tabsType.value.find((item) => item.value === activeName.value)?.label
  openUrl(`/detail`, { id, name })
}

// init
const init = async () => {
  await getDictData('model_name')
  setTabData()
  getList()
}

defineExpose({ setKeep })
</script>

<style scoped lang="scss">
.News {
  .select {
    font-weight: bold;
    text-transform: uppercase;
    img {
      height: 20px;
      transition: 0.3s;
    }
  }

  .tab {
    // display: grid;
    // grid-template-columns: calc(100% - 400px) 400px;
    // justify-content: space-between;
    border-bottom: 2px solid #eaebec;

    :deep(.el-tabs) {
      margin-right: 30px;
      .el-tabs__header {
        margin: 0;
      }
      .el-tabs__nav-wrap::after {
        height: 0;
      }
    }
  }

  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 31px;
    grid-row-gap: 20px;
    .item {
      padding: 20px;
      background: #f5f5f5;
      color: #6a6973;
      display: grid;
      grid-template-rows: 217px 43px 10px 78px ;
      align-content: space-between;
      cursor: pointer;
      height: 460px;
      .pic {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .title {
        color: var(--titleColor);
        font-weight: bold;
        font-size: 16px;
      }
      .time {
        font-size: 12px;
      }
      .text {
        font-size: 14px;
        line-height: 1.4;
      }
      .icon {
        img {
          height: 20px;
          margin-right: 3px;
        }
      }
    }
  }

  &.mobile {
    .g-con {
      width: 100%;
    }

    .top {
      background: #252628;
      color: #fff;
      padding: 12px 20px;
      font-weight: bold;
    }

    .tabm {
      white-space: nowrap;
      overflow-x: scroll;
      .item {
        display: inline-block;
        padding: 10px 20px;
        border-bottom: 2px solid #eaebec;
        &.active {
          color: var(--mainColor);
          border-color: var(--mainColor);
        }
      }
    }

    .list {
      display: block;
      padding: 10px;
      .item {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
